// 显示请求数据
const num = 8;
//第几页
let page = 1;
// let kw = '';
let kw1='';
let total;
let orderType = 1;
let orderName = 'goods_id';
// 获取地址栏的关键字
const oFilter = $('.search-filter ul');
const oCon = $('.order-content');
const oPageAll = $('.pageAll');
const oNumber = $('.number');
const oMoney = $('.money');
const oCom = $('.show-all');

const oDiv1 = $('.column1');
const oDiv2 = $('.column2');

const oXlUp = $('.xl-up');
const oXlDown = $('.xl-down');
const oPriUp = $('.pri-up');
const oPriDown = $('.pri-down');

// 搜索框
// const oSearch = $('.search-input');
// const oBtn = $('.border span');

let oLi = $('.search-filter li');



oDiv1.on('click', function () {  
    oDiv1.children('.list').slideToggle();
})
oDiv2.on('click', function () {  
    oDiv2.children('.list').slideToggle();
})



let str = location.search.replace('?', '');
let kw = str.split('=')[1];

// 先调用显示函数
render();

// 点击事件
// 获取元素
let oPre = $('.prev');
let oNex = $('.next');
let oSpan = $('.pageAll span');
let oTitle = $('.search-filter li');
let oUl1 = $('.search-filter ul');
let oAllGood = $('.all-good');
// 按照销量排序
oXlUp.on('click', function () {  
    orderName = 'goods_xl';
    orderType = 1;
    page = 1;
    render();
})
oXlDown.on('click', function () {  
    orderName = 'goods_xl';
    orderType = 2;
    page = 1;
    render();
})
// 按照价格排序
oPriUp.on('click', function () {
    orderName = 'goods_price';
    orderType = 1;
    page = 1;
    render();
})
oPriDown.on('click', function () {
    orderName = 'goods_price';
    orderType = 2;
    page = 1;
    render();
})
// 综合排序
oCom.on('click', function () {  
    orderName = 'goods_id';
    orderType = 1;
    page = 1;
    render();
})



// 点击分类切换
// oUl1.on('click', function (e) {  
//     let target = e.target;

//     if (target.tagName === 'LI') {
//         kw1 = target.innerHTML;
//         if (kw1) {
//             // 默认第一页
//             page = 1;
//             render();
//         }
        
//         return;
//     }
// })

//点击事件
oPageAll.on('click', function (e) {  
   
    let target = e.target;
    // 上翻页
    if (target.className === 'prev') {
        page--;
        if (page <= 1) {
            page = 1;
           
        }
        render();
        // ++后上翻页启用 hover时有样式
        return;
    }
    // 下翻页
    if (target.className === 'next') {
        
        page++;
        if (page >= total) {
            page = total;
        }
        render();
        // ++后上翻页启用 hover时有样式
        return;
    }
    // 小点点击
    if (target.tagName === 'SPAN') {
        page = $(target).index();
        render();
        return;
    }

})


// kw为1表示手机 2表示电视 3表示智能穿戴
function render() {  
    alls({
        kw1,
        kw,
        page,
        orderName,
        orderType,
        num
    }).then(res => {
        if (kw1 != '') {
            const { status, msg, title, pattern: data } = res;
            console.log(res);
        let html = '';
        let filters = '';
    
        if (status) {
            
            filters = `<li class="all-goods">全部</li>`;
            title.forEach(v => {
                filters += `
                        <li>${v.goods_pattern}</li>
                    `;
            })
            
            data.forEach(v => {
                const { goods_title , goods_price , goods_img , goods_id} = v;
                html += `
                    <div class="items">
                        <a href="../html/detail.html?id=${goods_id}">
                            <img src="${goods_img}" alt="">
                            <h2>${goods_title}</h2>
                            <p>${goods_price}元起</p>
                        </a>
                    </div>
                `;
                
            })
            oCon.html(html);
            oFilter.html(filters);

            oLi = $('.search-filter li');
            // 点击事件
            $(oLi[0]).on('click', function () {  
                kw1 = '';
                page = 1;
                render();
            })
            for (let i = 1; i < oLi.length+1; i++){
                $(oLi[i]).on('click', function () {  
                    kw1 = title[i-1].goods_pattern;
                    page = 1;
                    render();
                })
            }
            
    
            //显示页数
            
            total = Math.ceil(res.total / num);
            let pageHTML = `<div class="prev">&lt;</div>`
            for (let j = 0; j < total; j++){
                // 当和page相等时就给这个j加样式
                if (j === page-1) {
                    pageHTML += `
                        <span class="on">${j + 1}</span>
                    `;
                    
                } else {
                    pageHTML += `
                    <span>${j + 1}</span>
                `;
                }
            }
            pageHTML += `<div class="next">&gt;</div>`;
            oPageAll.html(pageHTML);
            oSpan = $('.pageAll span');
            oPre = $('.prev');
            oNex = $('.next');
            
            // 点击全部
            oAllGood.on('click', function () {  
                orderName = 'goods_id';
                page = 1;
                render();
            })
           

            
        } else {
            alert(msg);
        }
        } else {
            const { status, msg, title, data } = res;
            console.log(res);
        let html = '';
        let filters = '';
    
        if (status) {
            
            filters = `<li class="all-goods">全部</li>`;
            title.forEach(v => {
                filters += `
                        <li>${v.goods_pattern}</li>
                    `;
            })
            
            data.forEach(v => {
                const { goods_title , goods_price , goods_img , goods_id} = v;
                html += `
                    <div class="items">
                        <a href="../html/detail.html?id=${goods_id}">
                            <img src="${goods_img}" alt="">
                            <h2>${goods_title}</h2>
                            <p>${goods_price}元起</p>
                        </a>
                    </div>
                `;
                
            })
            oCon.html(html);
            oFilter.html(filters);

            oLi = $('.search-filter li');
            // 点击事件
            $(oLi[0]).on('click', function () {  
                kw1 = '';
                page = 1;
                render();
            })
            for (let i = 1; i < oLi.length+1; i++){
                $(oLi[i]).on('click', function () {  
                    kw1 = title[i-1].goods_pattern;
                    page = 1;
                    render();
                })
            }
            
    
            //显示页数
            
            total = Math.ceil(res.total / num);
            let pageHTML = `<div class="prev">&lt;</div>`
            for (let j = 0; j < total; j++){
                // 当和page相等时就给这个j加样式
                if (j === page-1) {
                    pageHTML += `
                        <span class="on">${j + 1}</span>
                    `;
                    
                } else {
                    pageHTML += `
                    <span>${j + 1}</span>
                `;
                }
            }
            pageHTML += `<div class="next">&gt;</div>`;
            oPageAll.html(pageHTML);
            oSpan = $('.pageAll span');
            oPre = $('.prev');
            oNex = $('.next');
            
            // 点击全部
            oAllGood.on('click', function () {  
                orderName = 'goods_id';
                page = 1;
                render();
            })
           

            
        } else {
            alert(msg);
        }
        }
        
        
    })
}

